<template lang="html">
  <div class="fen2">
    <div class="search">
      <p v-for='info in data.brands'>
        <a :href="'#anchor-'+ items" v-for='items in info.cap'>{{ items }}</a> <br>
      </p>
    </div>
    <div class="fen2_list" v-for='info in data.brands'>
      <div :id="'anchor-' + items" class="list_top" v-for='items in info.cap'>
        {{ items }}
      </div>
      <ul>
        <li v-for='pro in info.list'>
          <span class="pro_left">{{ pro.cname }}</span>
          <span class="pro_right">{{ pro.ename }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data:{}
    }
  },
  created() {
    this.axios.get('../static/data/fen2.json').then(obj => {
      this.data = obj.data.rp_result;
    })
  },
  methods: {
    // goaction(selector) {
    //   let anchor = this.$el.querySelector(selector)
    //   document.body.scrollTop = anchor.offsetTop
    //   console.log(selector);
    // }
  }
}
</script>

<style lang="css">
  .fen2 {
    background: white;
    position: relative;
  }
  .fen2_list {
    width: 100%;
    margin-top: .8rem;
    position: relative;
  }
  .fen2 .search {
    width: 6%;
    position: fixed;
    top: .8rem;
    right: 0;
    background: #232222;
    text-align: center;
    z-index: 99;
  }
  /*.fen2 .search ul {
    list-style: none;
  }*/
  .fen2 .search p {
    height: .1rem;
    text-align: center;
    border: none;
  }
  .fen2 .search p a {
    width: 100%;
    /*font-size: .2rem;*/
    color: white;
  }
  .list_top {
    width: 100%;
    height: .5rem;
    background: #ece3e3;
    line-height: .5rem;
  }
  .fen2_list ul li {
    width: 100%;
    height: .8rem;
    font-size: .2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: .0001rem solid #999;
  }
  .fen2_list ul li span {
    width: 43%;
  }
  .fen2_list ul li .pro_right {
    text-align: right;
    margin-right: 6%;
  }
</style>
